<template>
    <div class="CxjAreaChartGl">
        <div class="chart_title">推荐成果状态数据一览表</div>
        <div id="echartdialog" class="echartdialog">

        </div>
    </div>
</template>

<script>
import { getChartDatagly } from '@/api/api'
// import echarts from 'echarts'
import * as echarts from 'echarts';
import {
    BarChart
} from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
    CanvasRenderer
} from 'echarts/renderers';

// 注册必须的组件
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);

// require('echarts/lib/chart/bar');
// require('echarts/lib/component/tooltip');
// require('echarts/lib/component/title');
    export default {
        name: 'CxjAreaChartGl',
        data() {
            return {
                loading: true,
                loginfo: [],
                visitFields:['thxg','btj','sum','dtj','ytj'],
                barData:[],
            }
        },
        components: {
            
        },
        methods: {
            getChartData() {
                getChartDatagly().then((res)=>{
                    if(res.code=='200'){
                        Object.keys(res.result).forEach(key=>{
                            res.result[key] =res.result[key]+""
                        })
                        this.loginfo = res.result;
                        console.log(this.loginfo)
                        var thxg = this.loginfo.thxg;
                        var btj = this.loginfo.btj;
                        var sum = this.loginfo.sum;
                        var dtj = this.loginfo.dtj;
                        var ytj = this.loginfo.ytj;
                        var myChart = echarts.init(document.getElementById('echartdialog'));
                        var option = {
                            legend: {
                                data: ['申报数量', '待推荐数量(含退回已提交数量)', '已推荐数量','退回修改','不推荐']
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value',
                                axisLine: {show:true},
                                axisTick: {show:true},
                            },
                            yAxis: {
                                type: 'category',
                                data: ['申报数量', '待推荐数量(含退回已提交数量)', '已推荐数量','退回修改','不推荐']
                            },
                            series: [{
                                data: [{
                                    name: '申报数量',
                                    value: sum,
                                    itemStyle: {
                                        color: '#F4B183'
                                    },
                                    label: {
                                        show: true
                                    },
                                }, {
                                    name: '待推荐数量(含退回已提交数量)',
                                    value: dtj,
                                    itemStyle: {
                                        color: '#8FAADC'
                                    },
                                    label: {
                                        show: true
                                    },
                                },{
                                    name: '已推荐数量',
                                    value: ytj,
                                    itemStyle: {
                                        color: '#A9D18E'
                                    },
                                    label: {
                                        show: true
                                    },
                                }, {
                                    name: '退回修改',
                                    value: thxg,
                                    itemStyle: {
                                        color: '#FFF2CC'
                                    },
                                    label: {
                                        show: true
                                    },
                                },{
                                    name: '不推荐',
                                    value: btj,
                                    itemStyle: {
                                        color: '#ED7D31'
                                    },
                                    label: {
                                        show: true
                                    },
                                }, ],
                                type: 'bar',
                                barWidth: 30,
                            }]
                        }
                        myChart.setOption(option);
                    }
                })
            },
        },
        mounted() {
            setTimeout(() => {
                this.loading = !this.loading
            }, 1000)
            this.getChartData();
        },
    }
</script>

<style lang="less" scoped>
.CxjAreaChartGl {
    background: #fff;
    padding-bottom: 100px;
}
.echartdialog {
    width: 80%;
    height: 400px;
    background: #fff;
}
.chart_title {
    padding-top: 20px;
    width: 80%;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}
</style>